<template>
  <div class="a4">
    <div>
      <h3>绩效面谈记录表</h3>
    </div>
    <div class="page">
      <div class="tr">
        <div class="td">被面谈人姓名</div>
        <div class="td"></div>
        <div class="td">工号</div>
        <div class="td"></div>
      </div>
      <div class="tr">
        <div class="td">所在部门</div>
        <div class="td"></div>
        <div class="td">职位</div>
        <div class="td"></div>
      </div>
      <div class="tr">
        <div class="td">谈话类型</div>
        <div class="td"></div>
        <div class="td">谈话日期</div>
        <div class="td"></div>
      </div>
      <div class="tr-fs">
        <div class="td1">面谈负责人姓名（要带职位）</div>
        <div class="td2"></div>
      </div>
      <div class="tr-fs">
        <div class="td1">面谈方式</div>
        <div class="td2">
          <a-radio-group>
            <a-radio :value="1">一对一面谈</a-radio>
            <a-radio :value="2">小组面谈</a-radio>
            <a-radio :value="3">会议面谈</a-radio>
          </a-radio-group>
        </div>
      </div>

      <div class="tr1">
        <div class="td1">序号</div>
        <div class="td2">面谈项目</div>
        <div class="td3">面谈记录</div>
      </div>
      <div
        class="tr1"
        v-for="(item, index) in props.templateData
          .performanceInterviewRecordTemplateItem"
        :key="item.id"
      >
        <div class="td1">{{ index + 1 }}</div>
        <div class="td2">{{ item.name }}</div>
        <div class="td3"></div>
      </div>
      <div
        class="tr-quesiton"
        v-for="item in props.templateData
          .performanceInterviewRecordTemplateQuestion"
        :key="item.id"
      >
        <div class="td1">
          <span style="margin-left: 16px">{{ item.name }}</span>
        </div>
        <div class="td2"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { Interview } from '@/apis/management/performance/baseSetting/assessmentSetting/type';
import { useVModel } from '@vueuse/core';

const props = withDefaults(
  defineProps<{
    templateData: Interview;
  }>(),
  {}
);
const emit = defineEmits(['update:templateData']);

const formData = useVModel(props, 'templateData', emit);
const gh = 10;
</script>
<style lang="less" scoped>
.a4 {
  margin: 0 auto;
  padding: 0;
  width: 210mm;
  min-height: 297mm;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  //   background-color: #f9f7f7;
}
.page {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  .tr {
    width: 100%;
    height: 50px;
    display: flex;

    .td {
      border-bottom: 1px solid #999;
      border-right: 1px solid #999;
      flex: 1;
    }
  }
  .tr1 {
    width: 100%;
    height: 50px;
    display: flex;
    .td1 {
      flex: 1;
      border-bottom: 1px solid #999;
      border-right: 1px solid #999;
    }
    .td2 {
      flex: 3;
      border-bottom: 1px solid #999;
      border-right: 1px solid #999;
    }
    .td3 {
      flex: 3;
      border-bottom: 1px solid #999;
      border-right: 1px solid #999;
    }
  }
  .tr-fs {
    width: 100%;
    height: 50px;
    display: flex;
    .td1 {
      flex: 1;
      border-bottom: 1px solid #999;
      border-right: 1px solid #999;
    }
    .td2 {
      flex: 3;
      border-bottom: 1px solid #999;
      border-right: 1px solid #999;
    }
  }
}
.td,
.td1,
.td2,
.td3 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tr-quesiton {
  display: flex;
  flex-direction: column;
  .td1 {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    display: flex;
    justify-content: flex-start;
  }
  .td2 {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
  }
}
</style>
